<template>
  <div class="daily-page">
    <user-card :data="user" :text="text" @click="toDetail()" />

    <block-card class="daily-content" title="打卡记录">
      <g-calendar :data="dates" @change="getData" @click="toDetail" />
    </block-card>
  </div>
</template>

<script>
import UserCard from '../user/components/UserCard.vue'
import { mapGetters } from 'vuex'
import { getList } from './api'
import GCalendar from '@/components/GCalendar.vue'
import BlockCard from '../home/components/BlockCard.vue'
import dayjs from 'dayjs'
import Taro from '@tarojs/taro'

export default {
  components: {
    UserCard,
    GCalendar,
    BlockCard
  },
  data() {
    return {
      dates: [],
      params: {},
      signed: undefined,
      date: dayjs().format('YYYY-MM-DD')
    }
  },
  computed: {
    ...mapGetters(['user']),
    text() {
      if (this.signed === undefined) {
        return ''
      }
      return this.signed ? '已签到' : '去签到'
    }
  },
  onShow({ reload }) {
    reload && this.getData(this.params)
  },
  methods: {
    async getData(data) {
      this.params = data
      this.dates = await getList(data)
      if (this.signed === undefined) {
        const today = this.dates.find(item => item.date === this.date)
        this.signed = Boolean(today.report)
      }
      this.signed
    },
    toDetail(item = {}) {
      if (!item.report && item.date) {
        return
      }
      Taro.navigateTo({
        url: '/pages/daily/detail/index?date=' + (item.date || this.date)
      })
    }
  }
}
</script>

<style lang="less">
@import './index.less';
</style>
